<template>
  <div class="table-box">
    <div class="form-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="流程实例ID：">
          <el-input v-model="varProcessInstanceId" placeholder=""></el-input>
        </el-form-item>
        <el-button type="primary" @click="synQuery">查询</el-button>
      </el-form>
    </div>
    <div class="center">
      <el-tabs v-model="activeName">
        <el-tab-pane label="历史数据" name="first">
          <el-table
            :data="processInstances"
            border
            :max-height="table.props.height">
            <el-table-column
              type="index"
              width="80"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="id"
              label="流程实例ID"
            >
            </el-table-column>
            <el-table-column
              prop="processDefinitionId"
              label="流程定义ID">
            </el-table-column>
            <el-table-column
              prop="businessKey"
              label="业务表单key">
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="开始时间"
              :formatter="formatDate">
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="结束时间"
              :formatter="formatDate">
            </el-table-column>
            <el-table-column
              prop="durationInMillis"
              label="办理时长"
              :formatter="durationInMillisFormatter">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="230">
              <template slot-scope="scope">
                <el-button @click="cancelEntrust(scope.row)" type="text" size="small">运行明细</el-button>
                <el-button @click="openDiagram(scope.row)" type="text" size="small">流程图</el-button>
                <el-button @click="deleteProcessInstace(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box mt20 text-right">
            <el-pagination
              @current-change="getProcessInstances"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="运行数据" name="second">
          <el-table
            :data="runProcessInstances"
            border
            :max-height="table.props.height">
            <el-table-column
              type="index"
              width="80"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="id"
              label="流程实例ID"
            >
            </el-table-column>
            <el-table-column
              prop="processDefinitionId"
              label="流程定义ID">
            </el-table-column>
            <el-table-column
              prop="processDefinitionKey"
              label="流程定义key">
            </el-table-column>
            <el-table-column
              prop="businessKey"
              label="业务表单key">
            </el-table-column>
            <el-table-column
              label="是否暂停">
              <template slot-scope="scope">
                <span v-if="scope.row.suspended==false">否</span>
                <span v-else>是</span>
              </template>
            </el-table-column>
            <el-table-column
              label="完成情况">
              <template slot-scope="scope">
                <span v-if="scope.row.ended==false">未完成</span>
                <span v-else>完成</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="230">
              <template slot-scope="scope">
                <el-button @click="cancelEntrust(scope.row)" type="text" size="small">运行明细</el-button>
                <el-button @click="openDiagram(scope.row)" type="text" size="small">流程图</el-button>
                <el-button @click="deleteRunProcessInstace(scope.row)" type="text" size="small">删除</el-button>
                <el-button v-if="scope.row.suspended==false" @click="suspendProcessInstance(scope.row)" type="text"
                           size="small">暂停
                </el-button>
                <el-button v-if="scope.row.suspended==true" @click="activateProcessInstance(scope.row)" type="text"
                           size="small">激活
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box mt20 text-right">
            <el-pagination
              @current-change="getRunProcessInstances"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="runTotal">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
  import Config from '../config';
  import moment from 'moment';

  const otherH = 185;
  const tableH = document.body.offsetHeight - otherH;
  export default {
    name: 'Monitor',
    data() {
      return {
        table: {
          props: {
            height: document.body.offsetHeight - otherH
          }
        },
        activeName: 'first',
        processInstances: [],
        runProcessInstances: [],
        varProcessInstanceId: "",
        total: 0,
        currentPage: 1,
        size: 10,
        runTotal: 0
      }
    },
    created: function () {
      this.initPage();
    },
    mounted() {
      this.initPage();
    },
    methods: {
      initPage() {
        const tableH = document.body.offsetHeight - otherH;
        this.table.props.height = tableH;
        this.getProcessInstances();
        this.getRunProcessInstances();
      },
      //运行数据和历史数据同时条件查询
      synQuery: function () {
        this.getProcessInstances();
        this.getRunProcessInstances();
      },
      //获取历史流程实例表
      getProcessInstances: function (data) {
        const that = this;
        var Vstart = 0;
        if (data != undefined && !isNaN(data)) {
          Vstart = (data - 1) * 10;
        }
        const params = {
          start: Vstart,
          order: 'desc',
          sort: 'startTime'
        };
        if (this.varProcessInstanceId !== "") {
          params.processInstanceId = this.varProcessInstanceId;
        }
        this.$http.get(Config.url + "history/historic-process-instances", {params}).then(function (data) {
          that.processInstances = data.data.data;
          that.total = data.data.total;
        }, function (response) {
          console.info(response);
        })
      },
      //获取正在运行流程实例表
      getRunProcessInstances: function (data) {
        const that = this;
        var Vstart = 0;
        if (data != undefined && !isNaN(data)) {
          Vstart = (data - 1) * 10;
        }
        const params = {
          start: Vstart,
          order: 'desc',
          sort: 'id'
        };
        if (this.varProcessInstanceId !== "") {
          params.id = this.varProcessInstanceId;
        }
        this.$http.get(Config.url + "runtime/process-instances", {params}).then(function (data) {
          that.runProcessInstances = data.data.data;
          that.runTotal = data.data.total;
        }, function (response) {
          console.info(response);
        })
      },
      //毫秒转化为分钟
      durationInMillisFormatter: function (data, row) {
        if (data.durationInMillis != null) {
          return (data.durationInMillis / 60000).toFixed(0) + "分钟";
        }
      },
      //运行明细
      cancelEntrust: function (data) {
        this.$router.push({
          name: 'RunDetail',
          params: {
            processInstanceId: data.id,
            processDefinitionId: data.processDefinitionId
          }
        })
      },
      //查看流程图
      openDiagram: function (data) {
        const src = Config.url + "diagram-viewer/index.html?processDefinitionId=" + data.processDefinitionId + "&processInstanceId=" + data.id;
        const height = window.screen.height * .7;
        const weight = window.screen.width * .8;
        const top = window.screen.height * .1;
        const left = window.screen.width * .1;
        window.open(src, '流程图', `height=${height}, width=${weight}, top=${top}, left=${left}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`);
      },
      //删除历史流程实例
      deleteProcessInstace: function (data) {
        var self = this;
        this.$http.delete(Config.url + "history/historic-process-instances/" + data.id).then(function (data) {
          self.$message({
            message: "删除成功",
            type: 'success'
          });
          self.getProcessInstances();
        }, function (response) {
          self.$message({
            message: "流程实例正在运行，无法删除",
            type: 'error'
          });
        });
      },
      //删除正在运行流程实例
      deleteRunProcessInstace: function (data) {
        var self = this;
        this.$http.delete(Config.url + "runtime/process-instances/" + data.id).then(function (data) {
          self.$message({
            message: "删除成功",
            type: 'success'
          });
          self.getRunProcessInstances();
        });
      },
      //暂停流程实例
      suspendProcessInstance: function (data) {
        var self = this;
        this.$http.put(Config.url + "runtime/process-instances/" + data.id, {"action": "suspend"}).then(function (data) {
          var message;
          if (data.data.suspended == true) {
            message = "暂停成功";
          } else {
            message = "暂停失败";
          }
          self.$message({
            message: message,
            type: 'success'
          });
          //document.location.reload();
          self.getRunProcessInstances();
        });

      },
      //激活流程实例
      activateProcessInstance: function (data) {
        var self = this;
        this.$http.put(Config.url + "runtime/process-instances/" + data.id, {"action": "activate"}).then(function (data) {
          var message;
          if (data.data.suspended == false) {
            message = "激活成功";
          } else {
            message = "激活失败";
          }
          self.$message({
            message: message,
            type: 'success'
          });
          //document.location.reload();
          self.getRunProcessInstances();
        });
      },
      formatDate(row, column, cellValue, index) {
        return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:mm') : "未结束";
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
